import QtQuick 2.15
import QtGraphicalEffects 1.15
import QtQuick.Controls 2.15
import App.Global 1.0
import "../Global"

//搜索框
Item{
    Row{
        anchors.verticalCenter:parent.verticalCenter
        anchors.left: parent.left
        spacing: 10
        //back按钮im
        Rectangle{
            id:backRect
            width: 25
            height: 35
            color: "transparent"
            radius: 4
            border.width: 2
            border.color: "#2b2b31"
            Image {
                id:backImg
                anchors.centerIn: parent
                scale: 0.15
                source: "qrc:/res/topArea/back.png"
            }
            layer.enabled: false
            layer.effect: ColorOverlay{
                source: backImg
                color: GlobalState.uiHoverColor
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    backImg.layer.enabled=true
                }
                onExited: {
                    backImg.layer.enabled=false
                }
            }
        }
        //搜索文本框
        TextField{
            id:searchText
            width: 300
            height: backRect.height
            leftPadding: 50
            placeholderText: "输入内容以搜索"
            font.pixelSize: 16
            font.family: "微软雅黑 Light"
            color: GlobalState.uiHoverColor

            Connections{    //连接到GlobalState中发出的信号
                target: GlobalState
                function onBlankAreaClicked(){
                    insideRect.gradientStopPos=1;   //点击空白区域时恢复搜索框的渐变色
                }
            }

            background: Rectangle{  //外部Rect模拟渐变色边框
                id:outsideRect
                anchors.fill: parent
                radius: 15
                gradient: Gradient{
                    orientation: Gradient.Horizontal    //水平方向渐变
                    GradientStop{color: "#21283d";position: 0}
                    GradientStop{color: "#383635";position: 1}
                }
                Rectangle{  //内部Rect模拟渐变色方框背景
                    id:insideRect
                    anchors.fill: parent
                    anchors.margins: 1
                    radius: 15
                    property real gradientStopPos: 1
                    gradient: Gradient{
                        orientation: Gradient.Horizontal    //水平方向渐变
                        GradientStop{color: "#372241";position: 0}
                        GradientStop{color: "#8a4d5d";position: insideRect.gradientStopPos}
                    }
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.IBeamCursor
                    propagateComposedEvents: true   // 允许事件继续传递
                    onPressed: {    //这里从Click改成了Press
                        insideRect.gradientStopPos = 0
                        searchPopup.open()
                        mouse.accepted = false      // 不阻止事件，让 TextField 接收到点击
                    }
                }
            }
            Rectangle{
                id:searchRect
                width: 20
                height: width
                anchors.left: parent.left
                anchors.leftMargin: 20
                anchors.verticalCenter: parent.verticalCenter
                color: "transparent"
                Image{
                    id:searchImg
                    scale: 0.13
                    anchors.centerIn: parent
                    source: "qrc:/res/topArea/search.png"
                }
                layer.enabled: false
                layer.effect: ColorOverlay{
                    source: searchImg
                    color: GlobalState.uiHoverColor
                }
                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        searchImg.layer.enabled=true
                    }
                    onExited: {
                        searchImg.layer.enabled=false
                    }
                }
            }
        }
        //用于searchPopup的第二层的流布局模型
        ListModel{
            id:searchSingModel
            ListElement{singName:"只因你太美"}
            ListElement{singName:"爱困"}
            ListElement{singName:"厉不厉害"}
            ListElement{singName:"IKUN"}
            ListElement{singName:"鸡你太美"}
            ListElement{singName:"只因你太美2"}
            ListElement{singName:"爱困2"}
            ListElement{singName:"厉不厉害2"}
            ListElement{singName:"IKUN2"}
            ListElement{singName:"鸡你太美2"}
        }
        //用于searchPopup的第三层的流布局模型
        ListModel{
            id:hotModel
            ListElement{singName:"只因你太美"}
            ListElement{singName:"爱困"}
            ListElement{singName:"厉不厉害"}
            ListElement{singName:"IKUN"}
            ListElement{singName:"鸡你太美"}
            ListElement{singName:"只因你太美2"}
            ListElement{singName:"爱困2"}
            ListElement{singName:"厉不厉害2"}
            ListElement{singName:"IKUN2"}
            ListElement{singName:"鸡你太美2"}
            ListElement{singName:"只因你太美3"}
            ListElement{singName:"爱困3"}
            ListElement{singName:"厉不厉害3"}
            ListElement{singName:"IKUN3"}
            ListElement{singName:"鸡你太美3"}
            ListElement{singName:"只因你太美4"}
            ListElement{singName:"爱困4"}
            ListElement{singName:"厉不厉害4"}
            ListElement{singName:"IKUN4"}
            ListElement{singName:"鸡你太美4"}
        }

        //弹出搜索菜单
        Popup{
            id:searchPopup
            width: parent.width
            height: 800
            y:searchText.height+10
            clip: true  //裁剪防止画面超出范围
            background: Rectangle{
                anchors.fill:parent
                radius: 10
                color:"#2d2d37"
                DebugBorder{}
                Flickable{  //可滑动范围
                    anchors.fill: parent
                    contentHeight: 1200
                    ScrollBar.vertical: ScrollBar{  //垂直进度条及美化
                        anchors.right: parent.right
                        anchors.rightMargin: 5
                        width: 15
                        contentItem: Rectangle{
                            visible: parent.active  //仅当进度条激活时
                            implicitWidth: 15
                            radius: 20
                            color: "#42424b"
                        }
                    }

                    Column{ //三个层次整体呈现列布局
                        anchors.fill: parent
                        Item{   //第一层＋第二层
                            id:titleAndFlow
                            anchors.left:parent.left
                            anchors.right: parent.right
                            height: historyItem.height+singFlow.height+50
                            DebugBorder{}
                            Item{   //第一层，显示标题和删除图标
                                id:historyItem
                                anchors.left: parent.left
                                anchors.leftMargin: 30
                                anchors.right: parent.right
                                anchors.rightMargin: 30
                                anchors.top: parent.top
                                anchors.topMargin: 30
                                height: 50
                                DebugBorder{}
                                Label {
                                    id:historyLabel
                                    anchors.left: parent.left
                                    anchors.verticalCenter: parent.verticalCenter
                                    text: "历史记录"
                                    color: "#7f7f85"
                                    font.pixelSize: 20
                                    font.family: "微软雅黑 Light"
                                }
                                Image {
                                    id: deleteImage
                                    width: 30
                                    height: width
                                    anchors.right: parent.right
                                    anchors.verticalCenter: parent.verticalCenter
                                    source: "qrc:/res/topArea/delete.png"
                                    //设置图片变更效果
                                    layer.enabled: false
                                    layer.effect: ColorOverlay{
                                        source: deleteImage
                                        color: GlobalState.uiHoverColor
                                    }
                                    //设置鼠标悬停效果
                                    MouseArea{
                                        anchors.fill: parent
                                        hoverEnabled: true
                                        cursorShape:Qt.PointingHandCursor
                                        onEntered: {
                                            deleteImage.layer.enabled=true
                                        }
                                        onExited: {
                                            deleteImage.layer.enabled=false
                                        }
                                        onClicked: {
                                            searchSingModel.clear()
                                        }
                                    }
                                }
                            }
                            Flow{   //第二层，显示多个历史记录的流布局
                                id:singFlow
                                anchors.top:historyItem.bottom
                                anchors.topMargin: 20
                                anchors.left: historyItem.left
                                anchors.right: historyItem.right
                                spacing: 10
                                Repeater{   //重复显示searchSingModel中的预制信息
                                    id:historyRep
                                    property bool isShowAll: true   //标识当前是否显示所有历史记录
                                    anchors.fill:parent
                                    model: searchSingModel  //数据来源
                                    delegate: Rectangle{    //每次重复显示的样式选择Rect
                                        width: dataLabel.implicitWidth+20
                                        height: 40
                                        color: GlobalState.historyItemColor
                                        radius: 15
                                        border.width: 1
                                        border.color: "#45454e"
                                        visible: index<(historyRep.isShowAll?10:7)  //如果是展开状态允许最多显示9个，折叠显示6个
                                        DebugBorder{}
                                        Label{  //Rect内部包含的Label
                                            id:dataLabel
                                            text: undefined===singName?
                                                      "":(historyRep.isShowAll?(index===9?">":singName)
                                                                              :(index===6?">":singName))  //判断该显示箭头还是歌曲名
                                            rotation: historyRep.isShowAll?(index===9?-90:0)
                                                                          :(index===6?90:0)  //判断该旋转为折叠还是展开的箭头
                                            anchors.centerIn: parent
                                            color: "#ddd"
                                            font.pixelSize: 20
                                            font.family: "微软雅黑 Light"
                                        }
                                        MouseArea{
                                            anchors.fill: parent
                                            hoverEnabled: true
                                            onEntered: {
                                                dataLabel.color=GlobalState.uiHoverColor
                                                parent.color="#393943"
                                                cursorShape=Qt.PointingHandCursor
                                            }
                                            onExited: {
                                                dataLabel.color="#ddd"
                                                parent.color="#2d2d37"
                                                cursorShape=Qt.ArrowCursor
                                            }
                                            onClicked: {
                                                if(historyRep.isShowAll && index===9){
                                                    historyRep.isShowAll=false
                                                }else if(!historyRep.isShowAll && index===6){
                                                    historyRep.isShowAll=true
                                                }else{
                                                    searchText.text=singName
                                                    searchPopup.close()
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        Item{   //第三层，显示热搜榜标题以及热搜榜内容
                            id:hotTitleItem
                            anchors.left: parent.left
                            anchors.right: parent.right
                            height: searchPopup.height-titleAndFlow.height
                            DebugBorder{}
                            Label { //标题
                                id:hotTitleLabel
                                anchors.top: parent.top
                                anchors.topMargin: 20
                                anchors.left: parent.left
                                anchors.leftMargin: 30
                                text: "热搜榜"
                                color: "#7f7f85"
                                font.pixelSize: 20
                                font.family: "微软雅黑 Light"
                                DebugBorder{}
                            }
                            Column{ //以列布局显示排行榜
                                anchors.top: hotTitleLabel.bottom
                                anchors.topMargin: 30
                                anchors.left: parent.left
                                anchors.right: parent.right
                                anchors.bottom: parent.bottom
                                Repeater{   //重复读取模型内容并显示
                                    model:hotModel
                                    delegate: Rectangle{    //以Rect为单位重复
                                        width: singFlow.implicitWidth
                                        height: 40
                                        color: "transparent"
                                        Label{  //显示排行数字
                                            id:hotIndexLabel
                                            anchors.left: parent.left
                                            anchors.leftMargin: 30
                                            anchors.verticalCenter: parent.verticalCenter
                                            color:index<3?"#eb4d44":"#818187"
                                            text: String(index+1)
                                            font.pixelSize: 18
                                            font.family: "微软雅黑 Light"
                                            DebugBorder{}
                                        }
                                        Label{  //显示排行内容
                                            id:hotNameLabel
                                            anchors.left: hotIndexLabel.right
                                            anchors.leftMargin: 30
                                            anchors.verticalCenter: parent.verticalCenter
                                            color:"#ddd"
                                            text: singName
                                            font.pixelSize: 18
                                            font.family: "微软雅黑 Light"
                                            DebugBorder{}
                                        }
                                        MouseArea{
                                            anchors.fill: parent
                                            hoverEnabled: true
                                            onEntered: {
                                                parent.color="#393943"
                                                cursorShape=Qt.PointingHandCursor
                                            }
                                            onExited: {
                                                parent.color="transparent"
                                                cursorShape=Qt.ArrowCursor
                                            }
                                            onClicked: {
                                                searchText.text=singName
                                                searchPopup.close()
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                }


            }
        }

        //语音
        Rectangle{
            id:voiceRect
            width: backRect.height
            height: backRect.height
            color: "transparent"
            radius: 4
            border.width: 2
            border.color: "#2b2b31"
            Image {
                id:voiceImg
                anchors.centerIn: parent
                scale: 0.15
                source: "qrc:/res/topArea/voice.png"
            }
            layer.enabled: false
            layer.effect: ColorOverlay{
                source: voiceImg
                color: GlobalState.uiHoverColor
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape:Qt.PointingHandCursor
                onEntered: {
                    voiceImg.layer.enabled=true
                }
                onExited: {
                    voiceImg.layer.enabled=false
                }
            }

        }
    }
}

